<!--
 * @FileDescription 选择模块页面
 * @Author lz
 * @Date 20230131 18:34:01
 * @LastEditors lz
 * @LastEditTime 20230131 18:34:01
-->
<template>
    <div class="blankBox">
        <!-- 选项列表 -->
        <div class="ask_box ask">
            <div class="tit">
                主考官
            </div>
            <div class="content">
                请将下列名称拖入到对应的部件框里。
            </div>
        </div>
        <div class="ListOptions" v-if="data.Destroy">
            <div v-if="data.RefreshType">
                <div class="box" v-for="(item, index) in MenuIndexData.Default.OptionLabel.value" v-drag.offset.clamp
                    drag-trigger @mousedown="press(item.Name)" @mouseup="rise" :key="item.InstanceId">{{ item.Name }}
                </div>
            </div>
        </div>
        <dragBox :remId="data.rem" @removeData="Operated" @DelOperaLab="Del" @verify="hand"
            v-for=" (item, index) in MenuIndexData.Default.LabelDataList.value" :Name="item.Name" :indexs="index"
            :Keys="item.InstanceId" :Length="item.Length" :ViewportPointX="item.ViewportPointX + '%'"
            :ViewportPointY="item.ViewportPointY + '%'" :Direction="item.Direction" :key="item.InstanceId"
            @click="Select(item.InstanceId)">
        </dragBox>

        <div class="submit Btn" @click="submit()">
            确定
        </div>
    </div>
</template>

<script setup lang="ts">
import HomeContent from '../../HomeContent';
import dragBox from './dragBox.vue'
import MenuIndexData from '../../menu/MenuIndex';
import simulationData from '../simulationTraining';
import { reactive, ref, toRefs, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onUnmounted, StyleValue, defineProps, defineEmits, watch } from 'vue'
import HighlighterComponent from '@runtime/UnityEngineBridge/HighlighterComponent';
const data = reactive({
    rem: '',
    remName: '',
    Destroy: true,
    RefreshType: true,
    styleStatus: 1,
    RecordID: -1,
});
const emit = defineEmits(["doSth"]);
// 触发提交
function submit() {
    simulationData.Default.TriggerValue.value = !simulationData.Default.TriggerValue.value

    setTimeout(() => {
        conArr()
    }, 250);


    setTimeout(() => {
        let newValuesList: any[] = [...newArr.value.values()]
        console.log(newValuesList);
        for (var i = 0; i < newValuesList.length; i++) {
            if (newValuesList[i] == false) {
                emit('doSth', false);
                break;
            }
            if (newValuesList[i] == true && i + 1 == MenuIndexData.Default.LabelDataList.value.length) {
                emit('doSth', true);
            }
        }
    }, 500);

}

// 高亮点击
async function Select(val: number) {
    if (val == data.RecordID) {
        // 清除高亮
        await HighlighterComponent.Default.ClearAsync();
        data.RecordID = -1        
    } else if (val != data.RecordID) {
        // 清除高亮
        await HighlighterComponent.Default.ClearAsync();
        // console.log(val, '获得的id');
        let id: Array<number> = [val]
        await HighlighterComponent.Default.UpdateAsync(id);
        data.RecordID = val
    }
}

function press(val: string) {
    data.rem = val
    console.log('点击',val);
}

function rise() {
    if (data.rem != '') {
        data.RefreshType = false
        setTimeout(() => {
            data.RefreshType = true
        }, 70);
    }
    data.rem = ''
    console.log('取消');
}
//拖入
function Operated(val: string) {
    data.rem = ''
    MenuIndexData.Default.OptionLabel.value.forEach((item, index) => {
        if (val == item.Name) {
            MenuIndexData.Default.OptionLabel.value.splice(index, 1)
        }
    });
}
//删除
function Del(val: string) {
    MenuIndexData.Default.LabelDataList.value.forEach(i => {
        if (i.Name == val) {
            MenuIndexData.Default.OptionLabel.value.push(i)
        }
    });
}
// 存贮题目信息

let conArrlist: Array<any> = []
function conArr() {
    conArrlist = []
    MenuIndexData.Default.LabelDataList.value.forEach((item, index) => {
        conArrlist.push({ Name: contentList.value.get(index) })
    });
    simulationData.Default.historyList.set(simulationData.Default.subscript.value, conArrlist)
    // console.log('存贮', simulationData.Default.historyList.get(simulationData.Default.subscript.value));
}


let newArr = ref(new Map())
let contentList = ref(new Map())

//提交校验
function hand(val: boolean, index: number, content: any) {
    newArr.value.set(index, val)
    contentList.value.set(index, content)
    // console.log(val, index, content, '数据推送', newArr);
}
onMounted(() => {
    if (simulationData.Default.trainingDatalist.value[simulationData.Default.subscript.value].IsSubmit) {
        simulationData.Default.historyList.get(simulationData.Default.subscript.value)!.forEach(item => {
            MenuIndexData.Default.OptionLabel.value.forEach((j, index) => {
                if (item.Name == j.Name) {
                    MenuIndexData.Default.OptionLabel.value.splice(index, 1)
                    // console.log('截取数据');
                }
            });
        });
    }
});

//监听切换
watch(() => MenuIndexData.Default.OptionLabel.value, (newVal, oldVal) => {
    if (newVal != oldVal) {
        if (simulationData.Default.trainingDatalist.value[simulationData.Default.subscript.value].IsSubmit) {
            simulationData.Default.historyList.get(simulationData.Default.subscript.value)!.forEach(item => {
                MenuIndexData.Default.OptionLabel.value.forEach((j, index) => {
                    if (item.Name == j.Name) {
                        MenuIndexData.Default.OptionLabel.value.splice(index, 1)
                        // console.log('截取数据');
                    }
                });
            });
        }
    }
})
</script>

<style scoped>
.ListOptions {
    float: right;
    width: 256px;
    height: 600px;
    overflow-y: auto;
    margin-top: 190px;
}

.ListOptions::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 6px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

.ListOptions::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/

    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #45B5FF;
}

.ListOptions::-webkit-scrollbar-track {
    /*滚动条里面轨道*/

    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #123965;
}

.ask_box {
    position: absolute;
    right: 0;
    width: 300px;
    height: 180px;
    background-image: url('/images/prompt_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.ask {
    top: 100px;
}

.tit {
    color: #31F8FF;
    font-size: 28px;
    padding: 10px;
    padding-left: 20px;
    padding-bottom: 0;
    font-family: PangMenZhengDao;
}

.content {
    font-size: 16px;
    padding: 0 20px;
    /* padding: 20px; */
    /* padding-top: 0; */
    /* height: 110px; */
    height: 150px;
    overflow-y: auto;
    color: #fff;
}

/* .content::-webkit-scrollbar {
    display: none;
} */
.content::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 6px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

.content::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(233, 20, 20, 0.2);
    background: #45B5FF;
}

.content::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(15, 4, 168, 0.2);
    border-radius: 10px;
    background: #123965;
}

.box {
    text-align: center;
    width: 213px;
    height: 73px;
    background-image: url('/images/options_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    font-size: 16px;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 73px;
    background-color: rgba(255, 255, 255, 0.01);
}

.Btn {
    position: absolute;
    font-size: 18px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    line-height: 54px;
    width: 120px;
    height: 54px;
    background-image: url('/images/btn_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.Btn:hover {
    color: #18ECFF;
    background-image: url('/images/btn_bg_select.png');
}

.submit {
    left: 888px;
    bottom: 90px;
}
</style>